<template>
	<view>
		<uni-datetime-picker v-model="dateRange" type="daterange" @change="changeLog" />
		<view style="width:96%;height: 100%;margin: 0px 0px 0px 25px;">
			<qiun-data-charts type="line" canvasId="trendChartLine" @scrollRight="scrollRight" :onzoom="true"
				:opts="chartOption" :chartData="chartData" :ontouch="true" :canvas2d="true" />

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: '',
				equipmentRealId: '',
				pointRealId: '',
				show: false,
				dateRange: [],
				startDate: '',
				endDate: '',
				scrollLoadingStatus: false,
				singlePageSize: 20,
				chartOption: {
					update: true,
					enableScroll: true,
					loadingType: 1,
					dataLabel: false,
					xAxis: {
						scrollShow: false,
						labelCount: 3,
						itemCount: 20,
						disableGrid: true,
						scrollAlign: 'current',
					},
					yAxis: {
						showTitle: true,
						data: []
					}
				},
				chartData: {

				},
				pageSize: 100,
				pageIndex: 1,

			}
		},
		onLoad(option) {
			this.equipmentRealId = option.equipmentRealId;
			this.pointRealId = option.pointRealId;
			this.userInfo = uni.getStorageSync('userInfo');
			wx.setPageOrientation({
				orientation: 'landscape'
			});
		},
		onReady() {
			this.getChartsData(this.pageIndex)
		},
		methods: {
			changeLog(e) {
				this.startDate = e[0];
				this.endDate = e[1];
				this.pageIndex = 1;
				this.getChartsData(this.pageIndex);
			},
			getChartsData(pageIndex) {
				uni.request({
					url: getApp().globalData.serverAddress + this.$uri.Uri_getTrendChartCollectRecords.replace(
							"{userRealId}", this.userInfo.userRealId)
						.replace("{equipmentRealId}", this.equipmentRealId)
						.replace("{pointRealId}", this.pointRealId),
					data: {
						page: pageIndex,
						limit: this.pageSize,
						startTime: this.startDate,
						endTime: this.endDate
					},
					dataType: "json",
					method: "GET",
					success: (res) => {
						if (res.data.data.categories.length > 0) {
							this.chartData = [];
							var around = "left"
							for (const item of res.data.data.series) {
								if (around == "left") {
									this.chartOption.yAxis.data.push({
										title: item.name,
										type: "value",
										position: around,
										tofix: 4,
										titleOffsetX: -80
									})
									around = "right"
								} else {
									this.chartOption.yAxis.data.push({
										title: item.name,
										type: "value",
										position: around,
										tofix: 4,
										titleOffsetX: 80
									})
									around = "left"
								}
							}
							this.chartData = res.data.data;
						} else {
							uni.showToast({
								icon: "error",
								title: "时间段内无数据",
								duration: 1000,
								mask: true
							})
						}
					},
					fail(res) {
						console.log(res);
					}
				})
			},
			//滚动条加载更新
			scrollRight(e) {
				//scrollLoadingStatus防抖方法
				if (this.scrollLoadingStatus === true) {
					return;
				} else {
					this.scrollLoadingStatus = true
					this.pageIndex++;
					this.getNewServerData(this.pageIndex);
				}
			},
			getNewServerData(pageIndex) {
				setTimeout(() => {
					uni.request({
						url: getApp().globalData.serverAddress + this.$uri.Uri_getTrendChartCollectRecords
							.replace("{userRealId}", this.userInfo.userRealId)
							.replace("{equipmentRealId}", this.equipmentRealId)
							.replace("{pointRealId}", this.pointRealId),
						data: {
							page: pageIndex,
							limit: this.pageSize,
							startTime: this.startDate,
							endTime: this.endDate
						},
						dataType: "json",
						method: "GET",
						success: (res) => {
							if (res.data.data.categories.length > 0) {
								this.chartData.categories = this.chartData.categories.concat(res.data
									.data.categories);
								for (var i = 0; i < this.chartData.series.length; i++) {
									this.chartData.series[i].data = this.chartData.series[i].data
										.concat(res.data.data.series[i].data);
								}
							}
						},
						fail(res) {
							console.log(res);
						}
					})
					this.scrollLoadingStatus = false
				}, 200)
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		flex: 1;
	}
</style>
